<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="common/head::head"></head>
<body>

<div class="layui-row">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <a onclick="editProject('');" class="layui-btn layui-btn-sm">创建节点</a>
            </div>
            <div class="layui-inline" th:unless="${#lists.isEmpty(array)}">
                <div class="layui-inline">
                    <label class="layui-form-label">分组</label>
                    <div class="layui-input-inline">
                        <select name="selectGroup" id="selectGroup" lay-verify="required" lay-filter="groupName"
                                lay-search="">
                            <option value="">请选择</option>
                            <option th:each="item : ${groups}" th:value="${item}" th:text="${item}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">筛选</label>
                    <div class="layui-input-inline">
                        <select name="nodeSelect" multiple="multiple" lay-filter="nodeSelect" lay-search="">
                            <option value=""></option>
                            <option th:value="${item.id}" th:each="item : ${array}" th:text="${item.name}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="layui-collapse" style="margin: 10px;" th:unless="${#lists.isEmpty(array)}">

    <div class="layui-colla-item nodeItemDiv" th:nodeId="${item.id}" th:each="item : ${array}">
        <div class="layui-colla-title">
            <div th:title="${item.id}" th:text="${item.name}">

            </div>
            <div class="layui-layout-right" style="padding-right: 10%;">

                <button th:if="${item.openStatus}" op="goIn"
                        th:url="@{${session.jpomProxyPath}+'/node/index.html?nodeId='+${item.id}}"
                        class="layui-btn layui-btn-sm layui-btn-normal ">
                    <i class="layui-icon   layui-icon-release"></i>
                    进入
                </button>

                <button th:if="${item.sshId!=null && sshName.get(item.sshId)!=null}" op="terminal"
                        th:data-name="${sshName.get(item.sshId)}"
                        th:data-id="${item.sshId}"
                        class="layui-btn layui-btn-sm layui-btn-normal ">
                    <i class="layui-icon layui-icon-layer"></i>
                    终端
                </button>

                <button op="edit" th:id="${item.id}"
                        class="layui-btn layui-btn-sm ">
                    <i class="layui-icon">&#xe642;</i>
                    编辑
                </button>
            </div>
        </div>
        <div class="layui-colla-content layui-show">

            <table th:if="${item.openStatus}" th:id="@{'table_'+${item.id}}"
                   th:lay-filter="@{'table_'+${item.id}}"></table>

            <p th:unless="${item.openStatus}">未启用节点</p>

        </div>
    </div>
</div>

<h1 align="center" th:if="${#lists.isEmpty(array)}">还没有任何节点，请先创建节点</h1>
</body>
<script type="text/javascript">
    var col = [
        {field: 'osName', title: '系统名'},
        {field: 'javaVersion', title: 'Java版本'},
        {field: 'totalMemory', title: 'JVM总内存'},
        {field: 'freeMemory', title: 'JVM剩余内存'},
        {field: 'jpomVersion', title: 'Jpom版本'},
        {field: 'javaVirtualCount', title: 'java程序个数'},
        {field: 'count', title: '项目个数'},
        {field: 'timeOut', title: '响应时间', width: '10%'},
        {field: 'runTime', title: '已运行时间'},
    ];
    var config = {
        cols: [col],
        url: "./node_status",
        loading: true,
        response: {
            statusCode: 200
        },
        done: function (data) {
        }
    };

    function loadSuccess() {
        // 点击事件
        $("button[op]").click(function (e) {
            layui.stope(e);
            var op = $(this).attr("op");
            if ("goIn" === op) {
                top.layer.msg('加载节点中..', {
                    icon: 16,
                    shade: 0.2,
                    time: 100000000
                });
                top.location.href = $(this).attr("url");
            } else if ("edit" === op) {
                editProject($(this).attr("id"));
            } else if ("terminal" === op) {
                var attr = $(this).attr("data-id");
                var name = $(this).attr("data-name");
                tabChange({
                    id: attr,
                    url: './node/ssh/terminal.html?id=' + attr,
                    title: name + ' - 终端',
                });
            }
            return false;
        });
        //
        layui.use(['multiSelect'], function () {
            var multiSelect = layui.multiSelect;
            form.on('select(nodeSelect)', function (nodeSelect) {
                setTimeout(function () {
                    var vals = {};
                    $(nodeSelect.elem).find('option:selected').each(function () {
                        vals[$(this).val()] = true;
                    });
                    changeNodeSelect(vals);
                    layui.data('cache', {
                        key: "selectNodes",
                        value: vals
                    });
                }, 500)
            });

            const cache = layui.data('cache');
            if (cache.selectNodes) {
                changeNodeSelect(cache.selectNodes);
                //
                var select = $("select[name='nodeSelect']");
                for (let selectNodesKey in cache.selectNodes) {
                    select.find('option[value="' + selectNodesKey + '"]').attr("selected", true);
                }
                multiSelect.render();
            }
        });

        form.on('select(groupName)', function (data) {
            //
            // 缓存选择
            layui.data('cache', {
                key: "selectNodeGroup",
                value: data.value
            });
            // 防止错误选择
            layui.data('cache', {
                key: "selectNodes",
                remove: true
            });
            var href = location.href;
            href = urlUpdateParams(href, "group", data.value);
            location.href = href;
            return true;
        });
        var queryGroup = getQueryString("group");
        if (queryGroup && queryGroup !== '') {
            // 选中
            $("#selectGroup option[value='" + queryGroup + "']").attr("selected", "selected");
            form.render();
        } else {
            const cache = layui.data('cache');
            if (cache.selectNodeGroup) {
                var href = location.href;
                href = urlUpdateParams(href, "group", cache.selectNodeGroup);
                location.href = href;
            }
        }
    }

    function changeNodeSelect(vals) {
        if ($.isEmptyObject(vals)) {
            $(".nodeItemDiv").show();
        } else {
            $(".nodeItemDiv").each(function () {
                var attr = $(this).attr("nodeId");
                if (vals[attr]) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }
    }

    function editProject(id) {
        layerOpen({
            type: 2,
            title: '管理节点配置信息',
            shade: 0.8,
            area: ['60%', '80%'],
            content: 'edit.html?id=' + id
        });
    }
</script>

<script type="text/javascript" th:each="item : ${array}" th:if="${item.openStatus}">
    asyncFn.push(function () {
        config.id = 'table_[[${item.id}]]';
        config.elem = '#table_[[${item.id}]]';
        config.where = {
            nodeId: "[[${item.id}]]"
        };
        tableRender(config);
    });
</script>
</html>
